<template>
  <div class="ucenter app-space">
    <!-- header -->
    <!-- <van-nav-bar :border="false" :z-index="999" class="van-transparent">
      <template #left>
        <div class="city-flex">
          <van-icon name="location" />
          <span>石家庄</span>
        </div>
      </template>
      <template #right>
        <div class="menu-flex">
          <div class="menu-link">
            <van-icon name="scan" />
            <p>扫一扫</p>
          </div>
          <div class="menu-link">
            <van-icon name="chat-o" />
            <p>消息</p>
          </div>
        </div>
      </template>
    </van-nav-bar>-->
    <Header></Header>
    <!-- main -->
    <van-tabs v-model="tabactive" class="sign-tabs">
      <van-tab>
        <template #title>
          <span class="tab-span">二手车</span>
        </template>
        <div class="shop-wrap">
          <div class="cars-menu justify">
            <div @click="href(CutShort)" class="c-menu-link">
              <img src="../../assets/c1.png" alt />
              <p>降价急售</p>
            </div>
            <div class="c-menu-link">
              <img src="../../assets/c2.png" alt />
              <p>低价SUV</p>
            </div>
            <div class="c-menu-link">
              <img src="../../assets/c3.png" alt />
              <p>准新车</p>
            </div>
            <div class="c-menu-link">
              <img src="../../assets/c4.png" alt />
              <p>练手车</p>
            </div>
            <div class="c-menu-link">
              <img src="../../assets/c5.png" alt />
              <p>代步车</p>
            </div>
          </div>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
            <van-dropdown-item v-model="value3" :options="option3" />
            <van-dropdown-item v-model="value4" :options="option4" />
          </van-dropdown-menu>
          <div class="cars-list">
            <van-cell v-for="(item, i) in lists" :key="i">
              <template #icon>
                <div class="car-pic">
                  <img :src="item.pic" alt />
                </div>
              </template>
              <template #title>
                <div class="car-title">{{ item.title }}</div>
                <div class="car-price">{{ item.price }}万</div>
                <div class="car-distince">2011年/8万公里</div>
              </template>
            </van-cell>
          </div>
        </div>
      </van-tab>
      <van-tab>
        <template #title>
          <span class="tab-span">选车</span>
        </template>
        <div class="shop-wrap">
          <newCars></newCars>
        </div>
      </van-tab>
      <van-tab disabled>
        <template #title>
          <span class="tab-span">新车</span>
        </template>
        <div class="shop-wrap"></div>
      </van-tab>
      <van-tab>
        <template #title>
          <span class="tab-span">车讯</span>
        </template>
        <div class="shop-wrap">
          <theCar></theCar>
        </div>
      </van-tab>
    </van-tabs>
    <!-- footer -->
    <van-tabbar :z-index="999" v-model="active" :placeholder="true">
      <van-tabbar-item icon="tongxunlu" to="/SignIndex">报名</van-tabbar-item>
      <van-tabbar-item icon="zixun" to="/News">资讯</van-tabbar-item>
      <van-tabbar-item icon="faxian" to="/">考试</van-tabbar-item>
      <van-tabbar-item icon="home" to="/ShopIndex">商城</van-tabbar-item>
      <van-tabbar-item icon="wode" to="/Ucenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
// 引入
import theCar from "./TheCar/TheCar";
import newCars from "./newCars/newCars";
import Header from "../sign/Header";
export default {
  name: "ShopIndex",
  components: {
    theCar,
    newCars,
    Header
  },
  data() {
    return {
      tabactive: 1,
      active: 3,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      option1: [{ text: "类型", value: 0 }],
      option2: [{ text: "品牌", value: 0 }],
      option3: [{ text: "价格", value: 0 }],
      option4: [{ text: "筛选", value: 0 }],
      lists: [
        {
          title: "宝马3系 2017款 318Li 时尚型",
          price: "21.00",
          pic: require("../../assets/car1.jpg")
        },
        {
          title: "大众 桑塔纳 2016款 1.6L 自动风尚版",
          price: "6.00",
          pic: require("../../assets/car2.jpg")
        },
        {
          title: "宝马3系 2014款 320i 进取型",
          price: "16.50",
          pic: require("../../assets/car3.jpg")
        },
        {
          title: "雪佛兰 2015款 赛欧3 1.3L AMT理想版",
          price: "4.50",
          pic: require("../../assets/car4.jpg")
        }
      ]
    };
  },
  methods: {
    // onClickDisabled() {
    //   this.$toast.fail("功能开发中");
    // },
    href() {
      this.$router.push({
        path: "/CutShort"
      });
    }
  }
};
</script>
<style></style>
